<!--
 * @Author: your name
 * @Date: 2020-05-30 21:11:38
 * @LastEditTime: 2020-06-03 15:48:54
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: /esr-project/src/components/FullScreen/index.vue
-->
<template>
  <div @click="handleFullScreen">
    <slot :data="fullscreen"></slot>
  </div>
</template>
<script>
export default {
  name: 'Fullscreen',
  data () {
    return {
      fullscreen: false // 是否全屏
    }
  },
  methods: {
    // 全屏事件
    handleFullScreen () {
      const element = document.documentElement
      // 判断是否已经是全屏
      // 如果是全屏，退出
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else { // 否则，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      // 改变当前全屏状态
      this.fullscreen = !this.fullscreen
      this.$emit('handleFullScreen', this.fullscreen)
    }
  }
}
</script>
